<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="input">
    <div id="eventLog"></div>
    <script>
        const eventLog = document.getElementById('eventLog');
        const input    = document.getElementById('input');

        function logEvent (e) {
            eventLog.textContent += e.type + ': ' + e.key + '; ';
        }

        ['keydown', 'keypress', 'keyup']
            .forEach(eventName => input.addEventListener(eventName, logEvent));
    </script>
</body>
</html>
